<style lang="scss" scoped>
    .head{
        position: relative;
        top: -1px;
        height: 30vh;
        padding: 4vh 5%;
        background-image: linear-gradient(to bottom, rgb(50, 134, 255), rgb(50, 134, 255), rgb(29, 70, 245));
        .user{
            width: 100%;
            height: 10vh;
            display: flex;
            .headImg{
                width: 100px;
                height: 70px;
                img{
                    height: 70px;
                    border-radius: 40px;
                }
            }
            .info{
                width: calc(100% - 100px);
                height: 60px;
                padding: 5px 0;
                color: #fff;
                .nickName{
                    height: 25px;
                    line-height: 25px;
                    font-size: 18px;
                }
                .desction{
                    width:100%;
                    height: 25px;
                    line-height: 30px;
                    font-size: 14px;
                    overflow: hidden;
                }
            }
        }
        .list{
            width: 100%;
            display: flex;
            height: 60px;
            margin-top: 25px;
            .listItem{
                width: 25%;
                text-align: center;
                color: #fff;
                font-size: 14px;
                .itemNumber{
                    height: 35px;
                    line-height: 35px;
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
        .orderList{
            position: absolute;
            width: 95%;
            box-sizing: border-box;
            padding: 10px 0;
            height: 90px;
            background-color: #fff;
            border-radius: 7px;
            bottom: -25px;
            left: 2.5%;
            box-shadow: 0 0 5px 0 #999;
            display: flex;
            .listItem{
                width: 20%;
                text-align: center;
                height: 100px;
                img{
                    height: 35px;
                }
                .itemTile{
                    height: 40px;
                    line-height: 35px;
                }
            }
        }
    }
    .tabNav{
        padding-top: 50px;
        .navItem{
            padding: 0 5%;
            height: 45px;
            border-bottom: 1px solid #eee;
            display: flex;
            .itemImg{
                width: 40px;
                height: 45px;
                display: flex;
                align-items: center;
                img{
                    height: 29px;
                }
            }
            .itemName{
                width: calc(100% - 100px);
                height: 45px;
                line-height: 45px;
            }
            .itemRight{
                position: relative;
                width: 60px;
                height: 45px;
                &::after{
                    position: absolute;
                    content:'';
                    width: 10px;
                    height: 10px;
                    border-top: 1px solid #999;
                    border-right: 1px solid #999;
                    transform: rotate(45deg);
                    top: 17px;
                    right: 0;
                }
            }
        }
    }
</style>
<template>
    <div class="myself">
        <p-navigator
            :text="'我的'"
            :is-back="false"
        />
        <div class="head">
            <div class="user">
                <div class="headImg">
                    <img :src="userInfo.headImg" alt="">
                </div>
                <div class="info">
                    <div class="nickName">
                        {{ userInfo.nickName }}
                    </div>
                    <div class="desction">
                        个人简介：{{ userInfo.desction == "''" ? '暂无简介': userInfo.desction }}
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="listItem">
                    <div class="itemNumber">
                        {{ userInfo.price }}
                    </div>
                    <div class="itemTitle">
                        账户(元)
                    </div>
                </div>
                <div class="listItem">
                    <div class="itemNumber">
                        {{ userInfo.polarBean }}
                    </div>
                    <div class="itemTitle">
                        极豆
                    </div>
                </div>
                <div class="listItem">
                    <div class="itemNumber">
                        {{ userInfo.fans }}
                    </div>
                    <div class="itemTitle">
                        粉丝
                    </div>
                </div>
                <div class="listItem">
                    <div class="itemNumber">
                        {{ userInfo.follow }}
                    </div>
                    <div class="itemTitle">
                        关注
                    </div>
                </div>
            </div>
            <div class="orderList">
                <div class="listItem" v-for="(item,index) in orderTab" :key="index">
                    <div class="itemImg">
                        <img :src="item.imgUrl" alt="">
                    </div>
                    <div class="itemTile">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
        <div class="tabNav">
            <div class="navItem" 
                v-for="(item,index) in tabNav" 
                :key="index"
                @click="item.path ? $router.push(item.path) : ''">
                <div class="itemImg">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="itemName">
                    {{ item.title }}
                </div>
                <div class="itemRight">

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // vue2是 选项式API
    // 导入获取用户信息接口
    import {getUserInfo} from '@/api'
    export default {
        methods: {
            // 用户信息
            getUser(){
                getUserInfo().then(res => {
                    // 响应服务端的回调参数
                    // 判断是否获取成功
                    if(res.data.code == 1){
                        // 把用户信息存在本地
                        // 在本地存储 对象格式的数据时
                        // 需要先将对象改成JSON字符串的格式 才能够正确存储值
                        this.$store.commit('changeUserInfo',res.data.result)
                    }
                })
            }
        },
        created(){
            this.getUser()
        },
        data() {
            return {
                userInfo:this.$store.state.userInfo,
                orderTab: [
                    {
                        title: "待付款",
                        imgUrl: require('../../assets/order/obligation.png')
                    },
                    {
                        title: "代发货",
                        imgUrl: require('../../assets/order/delivery.png')
                    },
                    {
                        title: "待收货",
                        imgUrl: require('../../assets/order/received.png')
                    },
                    {
                        title: "待评价",
                        imgUrl: require('../../assets/order/assess.png')
                    },
                    {
                        title: "全部订单",
                        imgUrl: require('../../assets/order/all.png')
                    }
                ],
                tabNav: [
                    {
                        title: '余额明细',
                        imgUrl: require('../../assets/user/balance.png')
                    },
                    {
                        title: '极豆明细',
                        imgUrl: require('../../assets/user/gold.png')
                    },
                    {
                        title: '赚极豆',
                        imgUrl: require('../../assets/user/polarBean.png')
                    },
                    {
                        title: '我的发布',
                        imgUrl: require('../../assets/user/release.png')
                    },
                    {
                        title: '我的收藏',
                        imgUrl: require('../../assets/user/tuck.png')
                    },
                    {
                        title: '设置',
                        imgUrl: require('../../assets/user/setup.png'),
                        path: '/setup'
                    }
                ],
                index: 1,
                title: '123'
            }
        }
    }
</script>